<template>
    <el-row class="data-lists">
        <el-col :span="9" :class="{ shake: disabled }">
            <div class="data-item-one flx-row">
                <div class="item-left">
                    <img src="../../assets/home.png" alt="" srcset="" />
                </div>
                <div class="item-right">
                    <div class="item-right-top">
                        <div class="tit mt-2">购物总支出</div>
                        <div class="num">{{ countAll.total }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="item-right-bottom flx-row">
                        <div class="item" v-for="(item, index) of countAll.list" :key="item.id">
                            <div class="tit">药品编号：{{ item.id }}</div>
                            <div class="num">{{ item.total }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="15" :class="{ shake: disabled }">
            <div class="data-item-two">
                <div class="item">
                    <div class="item-des flx-row">
                        <img src="../../assets/icon1.png" alt="" />
                        <div class="right">
                            <div class="num">{{ dau.today }} <span>{{ dau.today - dau.yesterday }}</span></div>
                            <div class="txt">今日活跃用户量</div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-des flx-row" style="margin-right: 0px">
                        <img src="../../assets/icon2.png" alt="" />
                        <div class="right">
                            <div class="num">{{ pvData.pv }} <span>{{ pvData.pv - pvData.yesPv }}</span></div>
                            <div class="txt">今日网站访问量</div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-des flx-row">
                        <div class="right border-right-1px">
                            <div class="num">{{ dau.yesterday }}</div>
                            <div class="txt">昨日活跃用户数</div>
                        </div>
                        <div class="right">
                            <div class="num">{{ totalUserNum }}</div>
                            <div class="txt">总用户数</div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-des flx-row" style="margin-right: 0px">
                        <div class="right border-right-1px">
                            <div class="num">{{ pvData.yesPv }}</div>
                            <div class="txt">昨日网站访问量</div>
                        </div>
                        <div class="right">
                            <div class="num">{{ pvData.totalPv }}</div>
                            <div class="txt">网站访问量</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row class="dataLayer">
        <el-col :span="18">
            <!-- <div class="flx-row">
                <div class="datalayer-echarts" :class="{ shake: disabled }">
                    <echart></echart>
                </div>
                <div class="datalayer-echarts" :class="{ shake: disabled }">
                    <linenearly></linenearly>
                </div>
            </div> -->
            <div class="table-data" :class="{ shake: disabled }">
                <div class="tit"><span class=" text-lg">购物历史</span>
                    <div class="block mt-2">
                        <el-date-picker v-model="dateValue" type="daterange" range-separator="To"
                            start-placeholder="2022-01-01" end-placeholder="2023-12-31" @change="dateChange"
                            value-format="YYYY-MM-DD" />
                        <el-table class="mt-4" ref="table" :data="tableData.list"
                            :header-cell-style="{ backgroundColor: '#ecf5ff' }" border stripe style="width: 100%">
                            <el-table-column v-for="item in columnData" :key="item.props" :sortable="item.sortable"
                                :prop="item.props" :label="item.label" :width="item.width" :fixed="item.fixed"
                                :align="item.align" show-overflow-tooltip>
                                <template v-slot:default="scope" v-if="item.props !== 'actions'">
                                    <el-input v-model="scope.row[item.props]" v-if="scope.row.itemEdit"></el-input>
                                    <div v-else class="one-cut-txt">{{ scope.row[item.props] }}</div>
                                </template>
                                <template v-slot:default="scope" v-if="item.props === 'actions'">
                                    <el-icon class="icon-edit" @click="itemEditHanld(scope.row)">
                                        <Finished v-if="scope.row.itemEdit" />
                                        <Edit v-else />
                                    </el-icon>
                                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
                                        icon-color="#626AEF" title="确认删除该数据?" @confirm="DeleteItem(index)">
                                        <template #reference>
                                            <el-icon class="icon-dele">
                                                <Delete />
                                            </el-icon>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination class="ml-96 mt-4" background v-model:current-page="pageInfoData.currentPage"
                            v-model:page-size="pageInfoData.pageSize" :page-sizes="[10, 20, 30, 40]" small="small"
                            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
                <div class="table-box">
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="data-item-three" :class="{ shakeRight: disabled }">
                <div class="tit">常用功能</div>
                <div class="content">
                    <div class="item" @click="handlePush(item)" v-for="(item, index) of commonUse" :key="index">
                        <div class="item-data flx-row">
                            <div class="tit">
                                <el-icon>
                                    <Promotion />
                                </el-icon>{{ item.name }}
                            </div>
                            <el-icon class="icon">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="notice">
                <div class="notice-news">
                    <img src="../../assets/homebg.jpeg" alt="" />
                </div>
            </div>
            <div class="data-item-three" :class="{ shakeRight: disabled }">
                <div class="tit">医疗市场</div>
                <div class="notice-lists">
                    <div class="item one-cut-txt" @click="handlePushNews(item)" v-for="item in notList" :key="item.id">
                        <span class="type">资讯</span> {{ item.text }}
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
  
<script setup>
import { onMounted, reactive, ref } from 'vue'
import {
    noticeLists, getDau, countPay,
    getUserCount, getCountAll, getPvNum, getRecordsByNum
} from '../../api/modules/index.js'
import { options } from './options.js'
import { useStore } from 'vuex'
import { homeList1 } from '../../api/modules/echart'
import echart from './components/echarts.vue'
import router from '../../router'
const columnData = ref(JSON.parse(JSON.stringify(options)))
const store = useStore()
const tableData = reactive({
    list: []
})
const dau = reactive({
    today: 0,
    yesterday: 0
})
const notList = reactive([
    {
        text: '从200亿到13000亿！ 中国已为全球第二大医疗器械市场',
        url: 'http://stock.10jqka.com.cn/20230712/c648794789.shtml'
    },
    {
        text: '医药主题回归！机构密集叩门医疗健康板块 富达、高盛、红杉、中欧出动',
        url: 'https://finance.eastmoney.com/a/202307162782231190.html'
    },
    {
        text: '九安医疗预计上半年净利下降超93%，称加快糖尿病诊疗照护新模式',
        url: 'https://baijiahao.baidu.com/s?id=1771399378680616348&wfr=spider&for=pc'
    },
    {
        text: '高值医用耗材市场加速重构：国产企业能否抓住集采机遇逆袭？',
        url: 'https://finance.eastmoney.com/a/202307142781520366.html'
    },
    {
        text: '「市场前瞻」2023年全球精准医疗行业市场现状及区域竞争格局分析',
        url: "https://baijiahao.baidu.com/s?id=1771295365510710703&wfr=spider&for=pc"
    },
    {
        text: '检测试剂龙头九安医疗风光不再 上半年净利预计下滑超90%',
        url: "http://finance.china.com.cn/stock/20230715/6009640.shtml"
    },
    {
        text: '华人健康再度出手抢占市场，医药零售行业“圈地战”白热化',
        url: "http://k.sina.com.cn/article_1838672663_6d97eb1702001e2b7.html"
    },
    {
        text: '市场规模不断扩大 高端医疗装备国产化提速',
        url: "http://news.cctv.com/2023/07/03/ARTIGFEhYCoBZrmynE5Wlcx4230703.shtml"
    }
])
const dateValue = ref()
const dateChange = () => {
    if (dateValue.value == undefined) {
        pageInfoData.value.start = ''
        pageInfoData.value.end = ''
    } else {
        pageInfoData.value.start = dateValue.value[0];
        pageInfoData.value.end = dateValue.value[1];
    }
    getRecords();
}
const handlePushNews = (item) => {
    window.location.href = item.url
}
const commonUse = ref(JSON.parse(sessionStorage.getItem("commonUse")))
const totalUserNum = ref(0)
const disabled = ref(false)
const handlePush = (to) => {
    router.push(to.path)
}
const total = ref()
let userInfo = ref(JSON.parse(store.getters.UserInfo.UserInfo))
const pageInfoData = ref({
    currentPage: 1,
    pageSize: 10,
    number: userInfo.value.securityNum,
    start: '',
    end: ''
})
const handleSizeChange = (val) => {
    pageInfoData.pageSize = val
    getRecords()
}
const handleCurrentChange = (val) => {
    pageInfoData.currentPage = val
    getRecords()
}
const countTotal = async () => {
    let res = await countPay(pageInfoData.value)
    if(res.data.data != null){
        countAll.total = res.data.data
    }
}
const initData = () => {
    getRecords()
    getDauData()
    getUserCountNum()
    getPvNumInfo()
    countTotal()
}
const getRecords = async () => {
    let res = await getRecordsByNum(pageInfoData.value)
    total.value = res.data.data.total
    tableData.list = res.data.data.records
}
const sizeChange = (val) => {
    pageInfoData.value.pageSize = val;
    getPage()
}
const currentChange = (val) => {
    pageInfoData.value.currentPage = val;
    getPage()
}
const getDauData = async () => {
    let res = await getDau()
    dau.today = res.data.data.today
    dau.yesterday = res.data.data.yesterday
}
const getUserCountNum = async () => {
    let res = await getUserCount()
    totalUserNum.value = res.data.data
}
const countAll = reactive({
    list: [],
    total: 0
})
const pvData = reactive({
    pv: 0,
    yesPv: 0,
    totalPv: 0
})
const getPvNumInfo = async () => {
    let res = await getPvNum()
    pvData.pv = res.data.data.pv
    pvData.yesPv = res.data.data.yesPv
    pvData.totalPv = res.data.data.totalPv
}
onMounted(() => {
    initData()
    disabled.value = true
    setTimeout(() => {
        disabled.value = false
    }, 1500)
})
</script>
  
<style lang="scss" scoped>
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

@import './index.scss';
</style>
  